import React, { PureComponent } from 'react';
import {
    Icon,
    Flex,
} from 'antd-mobile';
import { routerRedux } from 'dva/router';
import { comment } from './EvaluateGoodsList.less';

import EvaluateGoodsItem from './EvaluateGoodsItem';

/**
 * 商品评价
 */
export default class EvaluateGoodsList extends PureComponent {


  render() {
    const { evaluateGoodsList = [], commentnum = 0, evaluate=0, praiseRate, consultationNum =0, dispatch, id, specId } = this.props;

    return (
        <div className={ comment }>
          <Flex style={{ height:'0.8rem', lineHeight:"0.8rem", borderBottom:"0.01rem solid #ebebeb" }} justify="between">
            <div style={{ color:"#666" }}>商品评价({commentnum})</div>
            <div onClick={() => dispatch(routerRedux.push(`/evaluateList/${id}/${specId}`))}>
              <span style={{ fontSize:"0.22rem", color:"#666", verticalAlign:"middle" }}>{praiseRate}%好评</span>
              <Icon type="right" style={{ width:'.3rem',height:'.3rem', verticalAlign:"middle" }}/>
            </div>
          </Flex>

          <div className="evaluate">
              {evaluateGoodsList ?
                  evaluateGoodsList.map((v,i,a)=>{

                      return (
                          <EvaluateGoodsItem v={v} key={i}></EvaluateGoodsItem>
                      )
                  }) : ""
              }
            <Flex className="evaluate_btn">
              <Flex.Item
                  onClick={()=>{
                      dispatch(routerRedux.push(`/evaluateList/${id}/${specId}`))
                  }}
                  // style={{ borderRight:"0.01rem solid #ebebeb" }}
              >
                  查看全部评价
              </Flex.Item>
              {/*<Flex.Item>购买咨询({consultationNum })</Flex.Item>*/}
            </Flex>
          </div>



        </div>
    )
  }
}
